<template>
  <div class="footer-tab">
    <div class="tab-item" v-for="(item,index) in msg" :key="index" :class="{active:item.selected}" @click="tabActive(item)">
      <div>
        <img :src="require(`../assets/imgs/${item.selected?item.img+'1':item.img}.png`)" alt />
      </div>
      <span>{{item.title}}</span>
    </div>
  </div>
</template>

<script>
import {getInfo} from '../utils/user'
export default {
  data() {
    return {
      msg: [
        { title: "首页", img: "home", selected: true ,url:'/'},
        { title: "产品", img: "all", selected: false ,url:'/productclassify'},
        { title: "导购", img: "bags", selected: false },
        { title: "服务", img: "favorites", selected: false },
        { title: "我的", img: "account", selected: false ,url:'/user'}
      ]
    };
  },
  methods:{
    tabActive(item){
      if(!item.url)return
      let userInfo = getInfo()
      console.log(userInfo)
     if(item.title == '我的'){
       if(!userInfo.id){
          this.$router.push({path:'/denglu'})
          return 
       }
     }
      this.$router.push(item.url)
    }
  },
  mounted(){
    let url = this.$route.fullPath
    this.msg.map(val=>{
      if(val.url == url){
        val.selected = true
      }else {
        val.selected = false
      }
      return val
    })
  }
};
</script>

<style scoped>
.footer-tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.6rem;
  display: flex;
  background: #fff;
  border-top: 1px solid #c8c8c8;
  overflow: hidden;
  z-index: 9999;
}

.active {
  color: #0c5ca8;
}

.tab-item {
  width: 20%;
  padding-top: 8px;
  text-align: center;
  font-size: 0.12rem;
}

.tab-item img {
  width: 0.25rem;
}
</style>